<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.3.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css">

<script class="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"example.com","root":"/","images":"/images","scheme":"Muse","version":"8.3.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"Searching...","empty":"We didn't find any results for the search: ${query}","hits_time":"${hits} results found in ${time} ms","hits":"${hits} results found"}};
  </script>
<meta name="description" content="JavaScript用法 HTML中的脚本必须位于标签之间 脚本可被放置在HTML页面的和中  JavaScript标签 在HTMl中插入JavaScript，使用标签 在之间书写代码  JavaScript使用限制 在HTML中，不限制脚本数量 通常会把脚本放置于标签中，以不干扰页面内容  JS的语法和注释 语句之间的间隔是分号 JS的执行顺序是按编写顺序执行 JS的关键字不能使用 JS大小写敏">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript基础">
<meta property="og:url" content="http://example.com/2021/01/28/JavaScript/JavaScript/index.html">
<meta property="og:site_name" content="Lawted&#39;s Blog">
<meta property="og:description" content="JavaScript用法 HTML中的脚本必须位于标签之间 脚本可被放置在HTML页面的和中  JavaScript标签 在HTMl中插入JavaScript，使用标签 在之间书写代码  JavaScript使用限制 在HTML中，不限制脚本数量 通常会把脚本放置于标签中，以不干扰页面内容  JS的语法和注释 语句之间的间隔是分号 JS的执行顺序是按编写顺序执行 JS的关键字不能使用 JS大小写敏">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2021-01-28T03:23:46.000Z">
<meta property="article:modified_time" content="2021-05-07T01:31:00.627Z">
<meta property="article:author" content="Lawted Wu">
<meta property="article:tag" content="JavaScript">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://example.com/2021/01/28/JavaScript/JavaScript/">


<script class="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'en'
  };
</script>
<title>JavaScript基础 | Lawted's Blog</title>
  




  <noscript>
  <style>
  body { margin-top: 2rem; }

  .use-motion .menu-item,
  .use-motion .sidebar,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header {
    visibility: visible;
  }

  .use-motion .header,
  .use-motion .site-brand-container .toggle,
  .use-motion .footer { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle,
  .use-motion .custom-logo-image {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line {
    transform: scaleX(1);
  }

  .search-pop-overlay, .sidebar-nav { display: none; }
  .sidebar-panel { display: block; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">Lawted's Blog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>Home</a></li>
        <li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>Tags</a></li>
        <li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives</a></li>
  </ul>
</nav>




</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript%E7%94%A8%E6%B3%95"><span class="nav-number">1.</span> <span class="nav-text">JavaScript用法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript%E6%A0%87%E7%AD%BE"><span class="nav-number">2.</span> <span class="nav-text">JavaScript标签</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript%E4%BD%BF%E7%94%A8%E9%99%90%E5%88%B6"><span class="nav-number">3.</span> <span class="nav-text">JavaScript使用限制</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JS%E7%9A%84%E8%AF%AD%E6%B3%95%E5%92%8C%E6%B3%A8%E9%87%8A"><span class="nav-number">4.</span> <span class="nav-text">JS的语法和注释</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JS%E7%9A%84%E5%8F%98%E9%87%8F"><span class="nav-number">5.</span> <span class="nav-text">JS的变量</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-number">6.</span> <span class="nav-text">运算符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%89%E5%88%99%E8%BF%90%E7%AE%97"><span class="nav-number">7.</span> <span class="nav-text">三则运算</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#if"><span class="nav-number">8.</span> <span class="nav-text">if</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#switch"><span class="nav-number">9.</span> <span class="nav-text">switch</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#for"><span class="nav-number">10.</span> <span class="nav-text">for</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#while"><span class="nav-number">11.</span> <span class="nav-text">while</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#alert"><span class="nav-number">12.</span> <span class="nav-text">alert</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#function"><span class="nav-number">13.</span> <span class="nav-text">function</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B1%80%E9%83%A8%E5%8F%98%E9%87%8F%E5%92%8C%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F"><span class="nav-number">14.</span> <span class="nav-text">局部变量和全局变量</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BC%82%E5%B8%B8"><span class="nav-number">15.</span> <span class="nav-text">异常</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6"><span class="nav-number">16.</span> <span class="nav-text">事件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JS%E7%9A%84DOM%E5%AF%B9%E8%B1%A1-Document-Object-Model"><span class="nav-number">17.</span> <span class="nav-text">JS的DOM对象(Document Object Model)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DOM%E6%93%8D%E4%BD%9CHTML"><span class="nav-number">18.</span> <span class="nav-text">DOM操作HTML</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DOM%E6%93%8D%E4%BD%9CCSS"><span class="nav-number">19.</span> <span class="nav-text">DOM操作CSS</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DOM-EvenListener"><span class="nav-number">20.</span> <span class="nav-text">DOM EvenListener</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JS%E4%BA%8B%E4%BB%B6%E6%B5%81"><span class="nav-number">21.</span> <span class="nav-text">JS事件流</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JS%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86"><span class="nav-number">22.</span> <span class="nav-text">JS事件的处理</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86"><span class="nav-number">22.1.</span> <span class="nav-text">HTML事件的处理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#DOM0%E7%BA%A7%E5%A4%84%E7%90%86"><span class="nav-number">22.2.</span> <span class="nav-text">DOM0级处理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#DOM2%E7%BA%A7%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86"><span class="nav-number">22.3.</span> <span class="nav-text">DOM2级事件处理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#IE%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E7%A8%8B%E5%BA%8F"><span class="nav-number">22.4.</span> <span class="nav-text">IE事件处理程序</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1"><span class="nav-number">23.</span> <span class="nav-text">事件对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1event"><span class="nav-number">23.1.</span> <span class="nav-text">事件对象event</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#type%EF%BC%9A%E8%8E%B7%E5%8F%96%E4%BA%8B%E4%BB%B6%E7%B1%BB%E5%9E%8B"><span class="nav-number">23.1.1.</span> <span class="nav-text">type：获取事件类型</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#target%EF%BC%9A%E8%8E%B7%E5%8F%96%E4%BA%8B%E4%BB%B6%E7%9B%AE%E6%A0%87"><span class="nav-number">23.1.2.</span> <span class="nav-text">target：获取事件目标</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#stopPropagation%EF%BC%9A%E9%98%BB%E6%AD%A2%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1"><span class="nav-number">23.1.3.</span> <span class="nav-text">stopPropagation：阻止事件冒泡</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#preventDefault%EF%BC%9A%E9%98%BB%E6%AD%A2%E4%BA%8B%E4%BB%B6%E9%BB%98%E8%AE%A4%E8%A1%8C%E4%B8%BA"><span class="nav-number">23.1.4.</span> <span class="nav-text">preventDefault：阻止事件默认行为</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AF%B9%E8%B1%A1"><span class="nav-number">24.</span> <span class="nav-text">对象</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#string%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%AF%B9%E8%B1%A1"><span class="nav-number">25.</span> <span class="nav-text">string字符串对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9C%A8%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%B8%AD%E6%9F%A5%E6%89%BE%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%9A-indexOf"><span class="nav-number">25.1.</span> <span class="nav-text">在字符串中查找字符串：.indexOf()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E9%95%BF%E5%BA%A6-length"><span class="nav-number">25.2.</span> <span class="nav-text">字符串长度.length</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%86%85%E5%AE%B9%E5%8C%B9%E9%85%8D-match"><span class="nav-number">25.3.</span> <span class="nav-text">内容匹配.match()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9B%BF%E6%8D%A2%E5%86%85%E5%AE%B9-replace"><span class="nav-number">25.4.</span> <span class="nav-text">替换内容.replace()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%A4%A7%E5%B0%8F%E5%86%99%E8%BD%AC%E6%8D%A2toUpperCase-toLowerCase"><span class="nav-number">25.5.</span> <span class="nav-text">字符串大小写转换toUpperCase()&#x2F;toLowerCase()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E8%BD%AC%E4%B8%BA%E6%95%B0%E7%BB%84strong-gt-split"><span class="nav-number">25.6.</span> <span class="nav-text">字符串转为数组strong&gt;split()</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Date%E6%97%A5%E6%9C%9F%E5%AF%B9%E8%B1%A1"><span class="nav-number">26.</span> <span class="nav-text">Date日期对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%8E%B7%E5%8F%96%E5%B9%B4%E4%BB%BDgetFullyear"><span class="nav-number">26.1.</span> <span class="nav-text">获取年份getFullyear</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%BE%E7%BD%AE%E6%97%B6%E9%97%B4"><span class="nav-number">26.2.</span> <span class="nav-text">设置时间</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%B0%E7%BB%84"><span class="nav-number">27.</span> <span class="nav-text">数组</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%95%B0%E7%BB%84%E7%9A%84%E5%88%9B%E5%BB%BA"><span class="nav-number">27.1.</span> <span class="nav-text">数组的创建</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%90%88%E5%B9%B6%E6%95%B0%E7%BB%84concat"><span class="nav-number">27.2.</span> <span class="nav-text">合并数组concat()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8E%92%E5%BA%8Fsort"><span class="nav-number">27.3.</span> <span class="nav-text">排序sort()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9C%A8%E6%9C%AB%E5%B0%BE%E8%BF%BD%E5%8A%A0push"><span class="nav-number">27.4.</span> <span class="nav-text">在末尾追加push()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BF%BB%E8%BD%ACreverse"><span class="nav-number">27.5.</span> <span class="nav-text">翻转reverse()</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Math%E5%AF%B9%E8%B1%A1"><span class="nav-number">28.</span> <span class="nav-text">Math对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9B%9B%E8%88%8D%E4%BA%94%E5%85%A5round"><span class="nav-number">28.1.</span> <span class="nav-text">四舍五入round()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%9A%8F%E6%9C%BA%E6%95%B0random"><span class="nav-number">28.2.</span> <span class="nav-text">随机数random()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9C%80%E5%A4%A7%E6%95%B0max-%E6%9C%80%E5%B0%8F%E6%95%B0min-%E7%BB%9D%E5%AF%B9%E5%80%BCabs"><span class="nav-number">28.3.</span> <span class="nav-text">最大数max()&#x2F;最小数min()&#x2F;绝对值abs()</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JSDOM%E5%AF%B9%E8%B1%A1%E6%8E%A7%E5%88%B6HTML"><span class="nav-number">29.</span> <span class="nav-text">JSDOM对象控制HTML</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0-getElementsByTagName"><span class="nav-number">29.1.</span> <span class="nav-text">获取元素 getElementsByTagName()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%8E%B7%E5%8F%96%E5%B1%9E%E6%80%A7-getAttribute"><span class="nav-number">29.2.</span> <span class="nav-text">获取属性 getAttribute()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%BE%E7%BD%AE%E6%96%B0%E5%B1%9E%E6%80%A7-setAttribute"><span class="nav-number">29.3.</span> <span class="nav-text">设置新属性 setAttribute()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%93%E7%82%B9-chidNodes"><span class="nav-number">29.4.</span> <span class="nav-text">访问子结点 chidNodes</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E8%8A%82%E7%82%B9-createElement"><span class="nav-number">29.5.</span> <span class="nav-text">添加一个节点 createElement()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8F%92%E5%85%A5%E4%B8%80%E4%B8%AA%E8%8A%82%E7%82%B9-insertBefore"><span class="nav-number">29.6.</span> <span class="nav-text">插入一个节点 .insertBefore()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%A0%E9%99%A4%E7%BB%93%E7%82%B9-removeChild"><span class="nav-number">29.7.</span> <span class="nav-text">删除结点 .removeChild()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BD%91%E9%A1%B5%E5%B0%BA%E5%AF%B8"><span class="nav-number">29.8.</span> <span class="nav-text">网页尺寸</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#window%E5%AF%B9%E8%B1%A1"><span class="nav-number">30.</span> <span class="nav-text">window对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#window%E5%B0%BA%E5%AF%B8"><span class="nav-number">30.1.</span> <span class="nav-text">window尺寸</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AE%A1%E6%97%B6%E5%99%A8"><span class="nav-number">31.</span> <span class="nav-text">计时器</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%A1%E6%97%B6%E6%96%B9%E6%B3%95"><span class="nav-number">31.1.</span> <span class="nav-text">计时方法</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#History-%E5%AF%B9%E8%B1%A1"><span class="nav-number">32.</span> <span class="nav-text">History 对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#History-%E6%96%B9%E6%B3%95"><span class="nav-number">32.1.</span> <span class="nav-text">History 方法</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Location-%E5%AF%B9%E8%B1%A1"><span class="nav-number">33.</span> <span class="nav-text">Location 对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Location%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7"><span class="nav-number">33.1.</span> <span class="nav-text">Location对象的属性</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#screen-%E5%AF%B9%E8%B1%A1"><span class="nav-number">34.</span> <span class="nav-text">screen 对象</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1"><span class="nav-number">35.</span> <span class="nav-text">面向对象</span></a></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">Lawted Wu</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">67</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">8</span>
        <span class="site-state-item-name">tags</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author site-overview-item animated">
      <span class="links-of-author-item">
        <a href="https://github.com/LAWTED" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;LAWTED" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
  </div>



        </div>
      </div>
        <div class="back-to-top animated" role="button" aria-label="Back to top">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="reading-progress-bar"></div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="en">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/01/28/JavaScript/JavaScript/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Lawted Wu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lawted's Blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          JavaScript基础
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-01-28 11:23:46" itemprop="dateCreated datePublished" datetime="2021-01-28T11:23:46+08:00">2021-01-28</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">Edited on</span>
        <time title="Modified: 2021-05-07 09:31:00" itemprop="dateModified" datetime="2021-05-07T09:31:00+08:00">2021-05-07</time>
      </span>

  
    <span class="post-meta-item" title="Views" id="busuanzi_container_page_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="far fa-eye"></i>
      </span>
      <span class="post-meta-item-text">Views: </span>
      <span id="busuanzi_value_page_pv"></span>
    </span>
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h2 id="JavaScript用法"><a href="#JavaScript用法" class="headerlink" title="JavaScript用法"></a>JavaScript用法</h2><ul>
<li>HTML中的脚本必须位于<script></script>标签之间</li>
<li>脚本可被放置在HTML页面的<body>和<head>中</li>
</ul>
<h2 id="JavaScript标签"><a href="#JavaScript标签" class="headerlink" title="JavaScript标签"></a>JavaScript标签</h2><ul>
<li>在HTMl中插入JavaScript，使用<script>标签</li>
<li>在<script></script>之间书写代码</li>
</ul>
<h2 id="JavaScript使用限制"><a href="#JavaScript使用限制" class="headerlink" title="JavaScript使用限制"></a>JavaScript使用限制</h2><ul>
<li>在HTML中，不限制脚本数量</li>
<li>通常会把脚本放置于<head>标签中，以不干扰页面内容</li>
</ul>
<h2 id="JS的语法和注释"><a href="#JS的语法和注释" class="headerlink" title="JS的语法和注释"></a>JS的语法和注释</h2><ul>
<li>语句之间的间隔是分号</li>
<li>JS的执行顺序是按编写顺序执行</li>
<li>JS的关键字不能使用</li>
<li>JS大小写敏感</li>
<li>注释和C语言一样</li>
</ul>
<h2 id="JS的变量"><a href="#JS的变量" class="headerlink" title="JS的变量"></a>JS的变量</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var x&#x3D;10；</span><br><span class="line">var string&#x3D;&quot;hello&quot;;</span><br><span class="line">var arr&#x3D;[1,2,3,4];</span><br><span class="line">var arr&#x3D;new Array(&quot;hello&quot;,&quot;jike&quot;,&quot;daojiahao&quot;);</span><br><span class="line">var arr&#x3D;new Array();</span><br><span class="line">arr[0]&#x3D;10;</span><br></pre></td></tr></table></figure>
<ul>
<li>任何类型和字符串相加都会变成字符串</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;p&gt;i&#x3D;10 j&#x3D;10&lt;&#x2F;p&gt;</span><br><span class="line">	&lt;p id&#x3D;&quot;sumid&quot;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">	&lt;botton onclick&#x3D;&quot;mysum()&quot;&gt;结果&lt;&#x2F;botton&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function mysum()&#123;</span><br><span class="line">	var i &#x3D; 10;</span><br><span class="line">	var j &#x3D; 10;</span><br><span class="line">	var m&#x3D;j+i;	document.getElementById(&quot;sumid&quot;).innerHTML&#x3D;m;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="运算符"><a href="#运算符" class="headerlink" title="运算符"></a>运算符</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">两个&#x3D;&#x3D;</span><br><span class="line">字符串&quot;10&quot;可以和数字10相等</span><br><span class="line"></span><br><span class="line">三个&#x3D;&#x3D;&#x3D;</span><br><span class="line">字符串&quot;10&quot;可以和数字10相等</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="三则运算"><a href="#三则运算" class="headerlink" title="三则运算"></a>三则运算</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var i&#x3D;11;</span><br><span class="line">document.write(i&gt;10?&quot;i大于10&quot;:&quot;i小于10&quot;)；</span><br></pre></td></tr></table></figure>
<h2 id="if"><a href="#if" class="headerlink" title="if"></a>if</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">if(i&gt;&#x3D;10)&#123;</span><br><span class="line">	document.write(&quot;hello&quot;);</span><br><span class="line">&#125;</span><br><span class="line">else&#123;</span><br><span class="line">	....</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="switch"><a href="#switch" class="headerlink" title="switch"></a>switch</h2><p>和C++一样</p>
<h2 id="for"><a href="#for" class="headerlink" title="for"></a>for</h2><p>和C++一样</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var i&#x3D;[1,2,3,4];</span><br><span class="line">var j;</span><br><span class="line">for(j in i)&#123;</span><br><span class="line">	document.write(i[j]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="while"><a href="#while" class="headerlink" title="while"></a>while</h2><p>和C++一样</p>
<h2 id="alert"><a href="#alert" class="headerlink" title="alert"></a>alert</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">alert(i);</span><br></pre></td></tr></table></figure>
<p>弹出对话框,显示内容</p>
<h2 id="function"><a href="#function" class="headerlink" title="function"></a>function</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function demo(a,b)&#123;     &#x2F;&#x2F;不需要写类型</span><br><span class="line">	var sum&#x3D;a+b;</span><br><span class="line">	alert(sum);</span><br><span class="line">	&#125;</span><br><span class="line">	demo(10,20);</span><br><span class="line">function demo1(name,age)&#123;</span><br><span class="line">	alert(&quot;Hello:&quot;+name&quot;,我的今年&quot;+age+&quot;岁&quot;)；</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="局部变量和全局变量"><a href="#局部变量和全局变量" class="headerlink" title="局部变量和全局变量"></a>局部变量和全局变量</h2><p>全局变量不需要 var</p>
<h2 id="异常"><a href="#异常" class="headerlink" title="异常"></a>异常</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">try&#123;</span><br><span class="line">	alert(str);</span><br><span class="line">&#125;catch(err)&#123;</span><br><span class="line">	alert(err);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;form&gt;</span><br><span class="line">		&lt;input id&#x3D;&quot;txt&quot; type&#x3D;&quot;text&quot;&gt;</span><br><span class="line">		&lt;input id&#x3D;&quot;btn&quot; type&#x3D;&quot;button&quot; onclick&#x3D;&quot;demo()&quot; value&#x3D;&quot;按钮&quot;&gt;</span><br><span class="line">	&lt;&#x2F;form&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">		function demo()&#123;</span><br><span class="line">			try&#123;</span><br><span class="line">				var e&#x3D;document.getElementById(&quot;txt&quot;).value;</span><br><span class="line">				if(e&#x3D;&#x3D;&quot;&quot;)&#123;</span><br><span class="line">					throw&quot;用户输入异常&quot;；</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;catch(err)&#123;</span><br><span class="line">				alert(err);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<h2 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">onClick            单击事件</span><br><span class="line">onMouseOver        鼠标经过事件</span><br><span class="line">onMouseOut         鼠标移出事件</span><br><span class="line">onChange           文本内容改变事件</span><br><span class="line">onSelect           文本框选中事件</span><br><span class="line">onFocus            光标聚集事件</span><br><span class="line">onBlur             移开光标事件</span><br><span class="line">onLoad             网页加载事件</span><br><span class="line">onUnload           关闭网页事件</span><br></pre></td></tr></table></figure>
<h2 id="JS的DOM对象-Document-Object-Model"><a href="#JS的DOM对象-Document-Object-Model" class="headerlink" title="JS的DOM对象(Document Object Model)"></a>JS的DOM对象(Document Object Model)</h2><h2 id="DOM操作HTML"><a href="#DOM操作HTML" class="headerlink" title="DOM操作HTML"></a>DOM操作HTML</h2><ol>
<li>使用document.write(“”)来改变HTML</li>
</ol>
<p>==不要在文档加载完成之后使用document.write()，这会覆盖该文档==</p>
<ol start="2">
<li>寻找元素</li>
</ol>
<ul>
<li>通过id找到HTML元素</li>
<li>通过标签名找到HTML元素、</li>
</ul>
<ol start="3">
<li>改变HTML内容</li>
</ol>
<p>使用属性：innerHTML</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function demo()&#123;</span><br><span class="line">	var nv&#x3D;document.getElementById(&quot;pid&quot;).innerHTML&#x3D;&quot;hello&quot;;</span><br><span class="line">	</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol start="4">
<li>改变HTML属性</li>
</ol>
<p>使用属性：attribute,例如href，src</p>
<h2 id="DOM操作CSS"><a href="#DOM操作CSS" class="headerlink" title="DOM操作CSS"></a>DOM操作CSS</h2><p>语法：document.getElementByid(id).style.background-color:…;</p>
<h2 id="DOM-EvenListener"><a href="#DOM-EvenListener" class="headerlink" title="DOM EvenListener"></a>DOM EvenListener</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">document.getElementById(&quot;btn&quot;).addEventListener(&quot;click&quot;,function()&#123;</span><br><span class="line">alert(&quot;hello&quot;)&#125;);</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var x&#x3D;document.getElementById(&quot;btn&quot;);</span><br><span class="line">x.addEventListener(&quot;click&quot;,hello);</span><br><span class="line">x.addEventListener(&quot;click&quot;,world);</span><br><span class="line">x.removeEventListener(&quot;click&quot;,hello);</span><br><span class="line">function hello()&#123;</span><br><span class="line">	alert(&quot;Hello&quot;);</span><br><span class="line">&#125;</span><br><span class="line">function world()&#123;</span><br><span class="line">	alert(&quot;world&quot;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="JS事件流"><a href="#JS事件流" class="headerlink" title="JS事件流"></a>JS事件流</h2><ul>
<li>事件冒泡：最具体的元素接受，到最不具体的</li>
<li>事件捕获：最不具体的接受，到最具体的</li>
</ul>
<h2 id="JS事件的处理"><a href="#JS事件的处理" class="headerlink" title="JS事件的处理"></a>JS事件的处理</h2><h3 id="HTML事件的处理"><a href="#HTML事件的处理" class="headerlink" title="HTML事件的处理"></a>HTML事件的处理</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;div id&#x3D;&quot;div&quot;&gt;</span><br><span class="line">    &lt;button id&#x3D;&quot;btn&quot; onclick&#x3D;&quot;demo()&quot;&gt;按钮&lt;&#x2F;button&gt;</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line">  &lt;script&gt;</span><br><span class="line">    function demo()&#123;</span><br><span class="line">	alert(&quot;Hello html事件处理&quot;);</span><br><span class="line">&#125;</span><br><span class="line">  &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<h3 id="DOM0级处理"><a href="#DOM0级处理" class="headerlink" title="DOM0级处理"></a>DOM0级处理</h3><p>把一个函数赋值给一个事件处理程序属性</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var btn&#x3D;document.getElementById(&quot;btn&quot;);</span><br><span class="line">btn.onclick&#x3D; function()&#123;alert(&quot;hello1&quot;)&#125;;   &#x2F;&#x2F;会被覆盖</span><br><span class="line">btn.onclick&#x3D; function()&#123;alert(&quot;hello2&quot;)&#125;;</span><br></pre></td></tr></table></figure>
<h3 id="DOM2级事件处理"><a href="#DOM2级事件处理" class="headerlink" title="DOM2级事件处理"></a>DOM2级事件处理</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var btn1&#x3D;document.getElementById(&quot;btn&quot;);</span><br><span class="line">btn1.addEventListener(&quot;click&quot;,demo1);</span><br><span class="line">btn1.addEventListener(&quot;click&quot;,demo2);</span><br><span class="line">btn1.removeEventListener(&quot;click&quot;,demo3);</span><br><span class="line">function demo2()&#123;</span><br><span class="line">  alert(&quot;hello world&quot;);</span><br><span class="line">&#125;</span><br><span class="line">function demo1()&#123;</span><br><span class="line">  alert(&quot;hello&quot;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="IE事件处理程序"><a href="#IE事件处理程序" class="headerlink" title="IE事件处理程序"></a>IE事件处理程序</h3><ul>
<li>attachEvent类似addEventListener</li>
<li>detachEvent类似removeEventListenr</li>
</ul>
<h2 id="事件对象"><a href="#事件对象" class="headerlink" title="事件对象"></a>事件对象</h2><p>在触发DOM事件的时候会产生一个对象</p>
<h3 id="事件对象event"><a href="#事件对象event" class="headerlink" title="事件对象event"></a>事件对象event</h3><h4 id="type：获取事件类型"><a href="#type：获取事件类型" class="headerlink" title="type：获取事件类型"></a>type：获取事件类型</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">document.getElementById(&quot;btn&quot;).addEventListener(&quot;click&quot;,showtype);</span><br><span class="line">function showtype(event)&#123;</span><br><span class="line">	alert(event.type);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">输出：click</span><br></pre></td></tr></table></figure>
<h4 id="target：获取事件目标"><a href="#target：获取事件目标" class="headerlink" title="target：获取事件目标"></a>target：获取事件目标</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">document.getElementById(&quot;btn&quot;).addEventListener(&quot;click&quot;,showtype);</span><br><span class="line">function showtype(event)&#123;</span><br><span class="line">	alert(event.target);</span><br><span class="line">&#125;</span><br><span class="line">输出：[object HTMLButtonElement]</span><br></pre></td></tr></table></figure>
<h4 id="stopPropagation：阻止事件冒泡"><a href="#stopPropagation：阻止事件冒泡" class="headerlink" title="stopPropagation：阻止事件冒泡"></a>stopPropagation：阻止事件冒泡</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">document.getElementById(&quot;btn&quot;).addEventListener(&quot;click&quot;,showtype);</span><br><span class="line">document.getElementById(&quot;div&quot;).addEventListener(&quot;click&quot;,showdiv);</span><br><span class="line">function showtype(event)&#123;</span><br><span class="line">	alert(event.target);</span><br><span class="line">	event.stopPropagation();</span><br><span class="line">&#125;</span><br><span class="line">function showdiv()&#123;</span><br><span class="line">	alert(&quot;div&quot;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="preventDefault：阻止事件默认行为"><a href="#preventDefault：阻止事件默认行为" class="headerlink" title="preventDefault：阻止事件默认行为"></a>preventDefault：阻止事件默认行为</h4><p><code>event.preventDefault();</code></p>
<h2 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h2><p>定义并创建对象实例</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">people &#x3D; new Object();</span><br><span class="line">people.name &#x3D; &quot;Lawted&quot;;</span><br><span class="line">people.age &#x3D; &quot;18&quot;;</span><br><span class="line">document.write(&quot;name: &quot;+people.name+&quot;,age:&quot;+people.age);</span><br><span class="line"></span><br><span class="line">people&#x3D;&#123;name:&quot;Lawted&quot;,age:&quot;30&quot;&#125;</span><br></pre></td></tr></table></figure>
<p>使用函数来定义对象，然后创建新的对象实例</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function people(name,age)&#123;</span><br><span class="line">	this._name&#x3D;name;</span><br><span class="line">	this._age&#x3D;age;</span><br><span class="line">&#125;</span><br><span class="line">son &#x3D; new people(&quot;Lawted&quot;,30);</span><br><span class="line">document.write(&quot;name:&quot;+son._name+&quot;&lt;br&#x2F;&gt;&quot;+ &quot;age:&quot;+son._age);</span><br></pre></td></tr></table></figure>

<h2 id="string字符串对象"><a href="#string字符串对象" class="headerlink" title="string字符串对象"></a>string字符串对象</h2><p>string对象：<br>字符串可以使用单引号和双引号</p>
<h3 id="在字符串中查找字符串：-indexOf"><a href="#在字符串中查找字符串：-indexOf" class="headerlink" title="在字符串中查找字符串：.indexOf()"></a>在字符串中查找字符串：.indexOf()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var str&#x3D; &quot;Hello world&quot;;</span><br><span class="line">document.write(str.indexOf(&quot;world&quot;));</span><br></pre></td></tr></table></figure>

<h3 id="字符串长度-length"><a href="#字符串长度-length" class="headerlink" title="字符串长度.length"></a>字符串长度.length</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var str&#x3D; &quot;Hello world&quot;;</span><br><span class="line">document.write(&quot;字符串长度：&quot;+str.length);</span><br></pre></td></tr></table></figure>
<p>返回位置，从0开始，如果没有则返回-1</p>
<h3 id="内容匹配-match"><a href="#内容匹配-match" class="headerlink" title="内容匹配.match()"></a>内容匹配.match()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var str&#x3D; &quot;Hello world&quot;;</span><br><span class="line">document.write(str.match(&quot;world&quot;)); </span><br></pre></td></tr></table></figure>
<p>如果有则返回内容，没有则返回null</p>
<h3 id="替换内容-replace"><a href="#替换内容-replace" class="headerlink" title="替换内容.replace()"></a>替换内容.replace()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var str&#x3D; &quot;Hello world&quot;;</span><br><span class="line">document.write(str.replace(&quot;world&quot;,&quot;nihao&quot;));</span><br></pre></td></tr></table></figure>
<p>两个参数，将内容替换</p>
<h3 id="字符串大小写转换toUpperCase-toLowerCase"><a href="#字符串大小写转换toUpperCase-toLowerCase" class="headerlink" title="字符串大小写转换toUpperCase()/toLowerCase()"></a>字符串大小写转换toUpperCase()/toLowerCase()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var str&#x3D; &quot;Hello world&quot;;</span><br><span class="line">document.write(str.toUpperCase());</span><br></pre></td></tr></table></figure>
<h3 id="字符串转为数组strong-gt-split"><a href="#字符串转为数组strong-gt-split" class="headerlink" title="字符串转为数组strong&gt;split()"></a>字符串转为数组strong&gt;split()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var str&#x3D; &quot;hello,jike,xueyuan&quot;;</span><br><span class="line">var s&#x3D; str.split(&quot;,&quot;);</span><br><span class="line">document.write(s[1]);</span><br></pre></td></tr></table></figure>
<h2 id="Date日期对象"><a href="#Date日期对象" class="headerlink" title="Date日期对象"></a>Date日期对象</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var date &#x3D; new Date();</span><br><span class="line">document.write(date);</span><br></pre></td></tr></table></figure>
<h3 id="获取年份getFullyear"><a href="#获取年份getFullyear" class="headerlink" title="获取年份getFullyear"></a>获取年份getFullyear</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var date &#x3D; new Date();</span><br><span class="line">document.write(date.getFullYear());</span><br></pre></td></tr></table></figure>
<h3 id="设置时间"><a href="#设置时间" class="headerlink" title="设置时间"></a>设置时间</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var date &#x3D; new Date();</span><br><span class="line">date.setFullYear(2011,0,1);       &#x2F;&#x2F;年份，月份，日期  月份从0开始</span><br><span class="line">document.write(date)</span><br></pre></td></tr></table></figure>
<h2 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h2><p>使用单独的变量名来存储一系列的值</p>
<h3 id="数组的创建"><a href="#数组的创建" class="headerlink" title="数组的创建"></a>数组的创建</h3><p><code>var myArray=[&quot;Hello&quot;,&quot;iwen&quot;,&quot;ime&quot;];</code></p>
<h3 id="合并数组concat"><a href="#合并数组concat" class="headerlink" title="合并数组concat()"></a>合并数组concat()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var a&#x3D;[&quot;hello&quot;,&quot;world&quot;];</span><br><span class="line">var b&#x3D;[&quot;Lawted&quot;,&quot;123&quot;];</span><br><span class="line">var c&#x3D;a.concat(b);</span><br><span class="line">document.write(c);</span><br></pre></td></tr></table></figure>
<h3 id="排序sort"><a href="#排序sort" class="headerlink" title="排序sort()"></a>排序sort()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var a&#x3D;[&quot;1&quot;,&quot;2&quot;,&quot;67&quot;,&quot;4&quot;,&quot;-10&quot;];</span><br><span class="line">document.write(a.sort());</span><br></pre></td></tr></table></figure>
<p>降序排序</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var a &#x3D; [&quot;1&quot;, &quot;2&quot;, &quot;67&quot;, &quot;4&quot;, &quot;-10&quot;];</span><br><span class="line">document.write(</span><br><span class="line">	a.sort(function (a, b) &#123;</span><br><span class="line">		return b - a;</span><br><span class="line">	&#125;)</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
<h3 id="在末尾追加push"><a href="#在末尾追加push" class="headerlink" title="在末尾追加push()"></a>在末尾追加push()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var a&#x3D;[&quot;a&quot;,&quot;b&quot;];</span><br><span class="line">a.push(&quot;c&quot;);</span><br><span class="line">document.write(a);</span><br></pre></td></tr></table></figure>

<h3 id="翻转reverse"><a href="#翻转reverse" class="headerlink" title="翻转reverse()"></a>翻转reverse()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var a&#x3D;[&quot;c&quot;,&quot;b&quot;,&quot;a&quot;];</span><br><span class="line">document.write(a.reverse());</span><br></pre></td></tr></table></figure>
<h2 id="Math对象"><a href="#Math对象" class="headerlink" title="Math对象"></a>Math对象</h2><p>执行常见的算数任务</p>
<h3 id="四舍五入round"><a href="#四舍五入round" class="headerlink" title="四舍五入round()"></a>四舍五入round()</h3><p><code>document.write(Math.round(4.7));</code></p>
<h3 id="随机数random"><a href="#随机数random" class="headerlink" title="随机数random()"></a>随机数random()</h3><p><code>document.write(Math.random());</code></p>
<p>取0-10的随机整数</p>
<p><code>document.write(parseInt(Math.random()*10))</code></p>
<h3 id="最大数max-最小数min-绝对值abs"><a href="#最大数max-最小数min-绝对值abs" class="headerlink" title="最大数max()/最小数min()/绝对值abs()"></a>最大数max()/最小数min()/绝对值abs()</h3><p><code>document.write(Math.max(1,23,424,55));</code></p>
<h2 id="JSDOM对象控制HTML"><a href="#JSDOM对象控制HTML" class="headerlink" title="JSDOM对象控制HTML"></a>JSDOM对象控制HTML</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">getElementsByName()       获取name</span><br><span class="line">getElementsByTagName()    获取元素</span><br><span class="line">getAttribute()            获取元素属性</span><br><span class="line">setAttribute()            设置元素属性</span><br><span class="line">childNodes()              访问子结点</span><br><span class="line">parentNode()              访问父结点</span><br><span class="line">createElement()           创建元素结点</span><br><span class="line">createTextNode            创建文本结点</span><br><span class="line">insertBefore()            插入结点</span><br><span class="line">removeChild()             删除结点</span><br><span class="line">offsetHeight              网页尺寸，不包含滚动条</span><br><span class="line">scrollHeight              网页尺寸，包含滚动条</span><br></pre></td></tr></table></figure>
<h3 id="获取元素-getElementsByTagName"><a href="#获取元素-getElementsByTagName" class="headerlink" title="获取元素 getElementsByTagName()"></a>获取元素 getElementsByTagName()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function getName()&#123;</span><br><span class="line">	var count&#x3D;document.getElementsByTagName(&quot;p&quot;)</span><br><span class="line">	var p &#x3D; count[3];</span><br><span class="line">	p.innerHTML&#x3D;&quot;World&quot;;</span><br><span class="line">&#125;</span><br><span class="line">getName();</span><br></pre></td></tr></table></figure>
<h3 id="获取属性-getAttribute"><a href="#获取属性-getAttribute" class="headerlink" title="获取属性 getAttribute()"></a>获取属性 getAttribute()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">HTML</span><br><span class="line">&lt;a id&#x3D;&quot;aid&quot; title&#x3D;&quot;标签&quot;&gt;world&lt;&#x2F;a&gt;</span><br><span class="line"></span><br><span class="line">JS</span><br><span class="line">function getAttr()&#123;</span><br><span class="line">	var anode&#x3D;document.getElementById(&quot;aid&quot;);</span><br><span class="line">	var attr&#x3D;anode.getAttribute(&quot;title&quot;);</span><br><span class="line">	alert(attr);</span><br><span class="line">&#125;</span><br><span class="line">getAttr();</span><br></pre></td></tr></table></figure>
<h3 id="设置新属性-setAttribute"><a href="#设置新属性-setAttribute" class="headerlink" title="设置新属性 setAttribute()"></a>设置新属性 setAttribute()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function getAttr()&#123;</span><br><span class="line">	var anode&#x3D;document.getElementById(&quot;aid&quot;);</span><br><span class="line">	anode.setAttribute(&quot;title&quot;,&quot;新的属性&quot;);</span><br><span class="line">	alert(anode.getAttribute(&quot;title&quot;));</span><br><span class="line">&#125;</span><br><span class="line">getAttr();</span><br></pre></td></tr></table></figure>
<h3 id="访问子结点-chidNodes"><a href="#访问子结点-chidNodes" class="headerlink" title="访问子结点 chidNodes"></a>访问子结点 chidNodes</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function getchildnode() &#123;</span><br><span class="line">	var childnode &#x3D; document.getElementsByTagName(&quot;ul&quot;)[0].childNodes;</span><br><span class="line">	alert(childnode.length);</span><br><span class="line">&#125;</span><br><span class="line">getchildnode();</span><br></pre></td></tr></table></figure>
<h3 id="添加一个节点-createElement"><a href="#添加一个节点-createElement" class="headerlink" title="添加一个节点 createElement()"></a>添加一个节点 createElement()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function createNode()&#123;</span><br><span class="line">  var body&#x3D;document.body;</span><br><span class="line">  var input&#x3D;document.createElement(&quot;input&quot;);</span><br><span class="line">  input.type&#x3D;&quot;button&quot;;</span><br><span class="line">  input.value&#x3D;&quot;按钮&quot;;</span><br><span class="line">  body.appendChild(input);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">createNode();</span><br></pre></td></tr></table></figure>
<h3 id="插入一个节点-insertBefore"><a href="#插入一个节点-insertBefore" class="headerlink" title="插入一个节点 .insertBefore()"></a>插入一个节点 .insertBefore()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">  &lt;div id&#x3D;&quot;div&quot;&gt;</span><br><span class="line">    &lt;p id&#x3D;&quot;pid&quot;&gt;这是一个坐标&lt;&#x2F;p&gt;</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">function addNode()&#123;</span><br><span class="line">	var div&#x3D;document.getElementById(&quot;div&quot;);</span><br><span class="line">  	var node&#x3D;document.getElementById(&quot;pid&quot;);</span><br><span class="line">  	var newnode&#x3D;document.createElement(&quot;p&quot;);</span><br><span class="line">  	newnode.innerHTML&#x3D;&quot;动态添加一个&quot;</span><br><span class="line">  	div.insertBefore(newnode,node);</span><br><span class="line">&#125;</span><br><span class="line">addNode();</span><br></pre></td></tr></table></figure>
<h3 id="删除结点-removeChild"><a href="#删除结点-removeChild" class="headerlink" title="删除结点 .removeChild()"></a>删除结点 .removeChild()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function removeNode()&#123;</span><br><span class="line">	var div&#x3D;document.getElementById(&quot;div&quot;);</span><br><span class="line">	var p&#x3D;div.removeChild(div.childNodes[1]);</span><br><span class="line">&#125;</span><br><span class="line">removeNode();</span><br></pre></td></tr></table></figure>
<h3 id="网页尺寸"><a href="#网页尺寸" class="headerlink" title="网页尺寸"></a>网页尺寸</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function getSize()&#123;</span><br><span class="line">	var width&#x3D;document.documentElement.offsetWidth;</span><br><span class="line">  	alert(width);</span><br><span class="line">  	var height&#x3D;document.documentElement.offsetHeight;</span><br><span class="line">  	alert(height);</span><br><span class="line">&#125;</span><br><span class="line">getSize();</span><br></pre></td></tr></table></figure>

<h2 id="window对象"><a href="#window对象" class="headerlink" title="window对象"></a>window对象</h2><ul>
<li>window对象是BOM的核心、window对象指当前的浏览器窗口</li>
<li>所有JS全局对象、函数以及变量均自动成为window对象的成员</li>
</ul>
<h3 id="window尺寸"><a href="#window尺寸" class="headerlink" title="window尺寸"></a>window尺寸</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">document.write(&quot;宽度：&quot;+window.innerWidth+&quot;高度：&quot;+window.innerHeight)</span><br></pre></td></tr></table></figure>
<ul>
<li>window.innerWidth  浏览器窗口的内部宽度</li>
<li>window.innerHeight  浏览器窗口的内部高度</li>
<li>window.open         打开页面</li>
<li>window.close        关闭页面</li>
</ul>
<h2 id="计时器"><a href="#计时器" class="headerlink" title="计时器"></a>计时器</h2><p>通过JS，在设定的时间间隔之后来执行，而不是在函数被调用后立即执行</p>
<h3 id="计时方法"><a href="#计时方法" class="headerlink" title="计时方法"></a>计时方法</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">setinterval()    间隔指定的毫秒数不停的执行指定代码</span><br><span class="line">clearinterval()  用来停止setinterval()方法执行的函数代码</span><br><span class="line">setTimeout()     暂停指定的毫秒数之后执行指定的代码</span><br><span class="line">clearTimeout()   用来停止setTimeout()方法执行的函数代码</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">  &lt;p id&#x3D;&quot;ptime&quot;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">  &lt;button onclick&#x3D;&quot;stoptime()&quot;&gt;按钮&lt;&#x2F;button&gt;</span><br><span class="line"></span><br><span class="line">var mytime&#x3D;setInterval(function()&#123;getTime()&#125;);</span><br><span class="line">function getTime()&#123;</span><br><span class="line">  var d&#x3D; new Date();</span><br><span class="line">  var t&#x3D; d.toLocaleTimeString();</span><br><span class="line">  document.getElementById(&quot;ptime&quot;).innerHTML&#x3D;t;</span><br><span class="line">&#125;</span><br><span class="line">function stoptime()&#123;</span><br><span class="line">	clearInterval(mytime);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="History-对象"><a href="#History-对象" class="headerlink" title="History 对象"></a>History 对象</h2><p>window.history 对象包含浏览器的历史（url）的集合</p>
<h3 id="History-方法"><a href="#History-方法" class="headerlink" title="History 方法"></a>History 方法</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">history.back()      浏览器后退按钮</span><br><span class="line">history.forward()   浏览器前进按钮</span><br><span class="line">history.go()        进入历史中的某个界面</span><br></pre></td></tr></table></figure>
<h2 id="Location-对象"><a href="#Location-对象" class="headerlink" title="Location 对象"></a>Location 对象</h2><p>window.location对象用于获得当前页面的地址，并把浏览器重定向到新的页面</p>
<h3 id="Location对象的属性"><a href="#Location对象的属性" class="headerlink" title="Location对象的属性"></a>Location对象的属性</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">location.hostname    返回web主机的域名</span><br><span class="line">location.pathname    返回当前页面的路径和文件名</span><br><span class="line">location.port        返回web主机的端口</span><br><span class="line">location.protocol    返回所使用的web协议</span><br><span class="line">location.href        返回当前页面的url</span><br><span class="line">location.assign()    加载新文档</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function get()&#123;</span><br><span class="line">document.getElementById(&quot;ptime&quot;).innerHTML&#x3D;window.location.href</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="screen-对象"><a href="#screen-对象" class="headerlink" title="screen 对象"></a>screen 对象</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">screen.availWidth     可用屏幕宽度</span><br><span class="line">screen.availHeight    可用屏幕高度</span><br><span class="line">screen.height         屏幕高度</span><br><span class="line">screen.width          屏幕宽度</span><br></pre></td></tr></table></figure>
<h2 id="面向对象"><a href="#面向对象" class="headerlink" title="面向对象"></a>面向对象</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">(function()&#123;function People()&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">People.prototype.say&#x3D;function()&#123;</span><br><span class="line">	alert(&quot;hello&quot;);</span><br><span class="line">&#125;&#125;());                             &#x2F;&#x2F;封装</span><br><span class="line"></span><br><span class="line">function Student()&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">Student.prototype &#x3D; new People();</span><br><span class="line">var s&#x3D;new Student();</span><br><span class="line">s.say();</span><br></pre></td></tr></table></figure>



    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/JavaScript/" rel="tag"># JavaScript</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2021/01/28/HTML/" rel="prev" title="HTML基础">
                  <i class="fa fa-chevron-left"></i> HTML基础
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2021/01/28/axios/" rel="next" title="axios基础">
                  axios基础 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>







<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      const activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      const commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Lawted Wu</span>
</div>
<div class="busuanzi-count">
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="Total Visitors">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="Total Views">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>

    </div>
  </footer>

  


  <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>


<script>
var options = {
  bottom: '64px', // default: '32px'
  right: '32px', // default: '32px'
  left: 'unset', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#000',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: true, // default: true,
  label: ' ', // default: ''
  autoMatchOsTheme: true // default: true
}
const darkmode = new Darkmode(options);
darkmode.showWidget();
</script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script>

  






  
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>





</body>
</html>
